// Learn cc.Class:
//  - [Chinese] http://docs.cocos.com/creator/manual/zh/scripting/class.html
//  - [English] http://www.cocos2d-x.org/docs/creator/en/scripting/class.html
// Learn Attribute:
//  - [Chinese] http://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
//  - [English] http://www.cocos2d-x.org/docs/creator/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - [Chinese] http://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
//  - [English] http://www.cocos2d-x.org/docs/creator/en/scripting/life-cycle-callbacks.html

cc.Class({
    extends: cc.Graphics,

    properties: {
        // foo: {
        //     // ATTRIBUTES:
        //     default: null,        // The default value will be used only when the component attaching
        //                           // to a node for the first time
        //     type: cc.SpriteFrame, // optional, default is typeof default
        //     serializable: true,   // optional, default is true
        // },
        // bar: {
        //     get () {
        //         return this._bar;
        //     },
        //     set (value) {
        //         this._bar = value;
        //     }
        // },
        radiu: {
            type: cc.Integer,
            default: 0
        },

    },

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {},

    start() {
        this.dirty = true;
    },

    onFocusInEditor() {
        this.dirty = true;
    },

    setColor(c) {
        this.fillColor = c;
        this.dirty = true;
    },

    update(dt) {
        if (this.dirty) {
            // this.moveTo(this.radiu, 0);
            // this.arc(this.radiu, this.radiu, this.radiu, Math.PI * 1.5, Math.PI, false);
            // this.lineTo(0, this.node.height - this.radiu + 1);
            // this.arc(this.radiu, this.node.height - this.radiu, this.radiu, Math.PI, Math.PI / 2, false);
            // this.lineTo(this.node.width - this.radiu, this.node.height);
            // this.arc(this.node.width - this.radiu, this.node.height - this.radiu, this.radiu, Math.PI / 2, 0, false);
            // this.lineTo(this.node.width, this.radiu);
            // this.arc(this.node.width - this.radiu, this.radiu, this.radiu, 0, Math.PI * 1.5, false);
            // this.lineTo(this.radiu, 0);
            // // this.fillColor = cc.Color.GREEN;
            // this.fill();

            // this.rect(0, 0, this.node.width, this.node.height);
            // this.fillColor = cc.Color.TRANSPARENT;
            // this.fill();

            this.clear();

            this.roundRect(0, 0, this.node.width, this.node.height, this.radiu);
            this.fill();

            // this.moveTo(this.radiu, 0);
            // this.quadraticCurveTo(0, 0, 0, this.radiu);
            // this.lineTo(0, this.node.height - this.radiu + 1);
            // this.quadraticCurveTo(0, this.node.height, this.radiu, this.node.height);
            // this.lineTo(this.node.width - this.radiu, this.node.height);
            // this.quadraticCurveTo(this.node.width, this.node.height, this.node.width, this.node.height - this.radiu);
            // this.lineTo(this.node.width, this.radiu);
            // this.quadraticCurveTo(this.node.width, 0, this.node.width - this.radiu, 0);
            // this.lineTo(this.radiu, 0);
            // this.fill();

            this.dirty = false;

            // this.rect(0, 0, this.node.width, this.node.height);
            // this.fillColor = cc.Color.GREEN;
            // this.fill();
        }
    },
});
